<template>
  <div class="wrapper">
    <div class="bg"></div>
    <van-nav-bar title="我的" />
    <div class="top">
      <div class="image">
        <img src="../../assets/img/avatar.png" alt="" />
        <!-- <img src="../../assets/img/avatarModify.png" alt="" class="add" /> -->
      </div>
      <div class="information" v-if="userInfo.username">
        <div class="name">{{ userInfo.username }}</div>
        <div class="phone">{{ userInfo.phone }}</div>
        <div class="address">{{ userInfo.address }}</div>
      </div>
      <div class="login" @click="toLogin" v-else>
        <button>登录</button>
      </div>
      <div class="setting" @click="toModify">
        <img src="../../assets/img/setting.png" />
      </div>
    </div>
    <div class="middle">
      <div class="item" @click="toBookStatus">
        <div class="item_image">
          <img src="../../assets/img/borrow2.png" alt="" />
        </div>
        <div class="title">书籍状态</div>
      </div>
      <div class="item" @click="toSayList">
        <div class="item_image">
          <img src="../../assets/img/borrow3.png" alt="" />
        </div>
        <div class="title">留言列表</div>
      </div>
      <div class="item" @click="toMessage">
        <div class="item_image">
          <img src="../../assets/img/borrow1.png" alt="" />
        </div>
        <div class="title">消息列表</div>
      </div>
    </div>
    <div class="bottom">
      <div class="item_bottom" @click="showKefu">
        <div class="left">
          <div class="bottom_image">
            <img src="../../assets/img/kefu.png" alt="" />
          </div>
          <div class="label">客服</div>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item_bottom marginTop" @click="toSay">
        <div class="left">
          <div class="bottom_image">
            <img src="../../assets/img/message.png" alt="" />
          </div>
          <div class="label">留言</div>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="btn" v-if="userInfo.username" @click="loginout">
      <button>退出登录</button>
    </div>
    <div class="toast" v-if="isShow">
      <div class="text2">客服电话</div>
      <div class="text3">15815270671</div>
      <div class="phone">
        <img src="../../assets/img/phone.png" />
      </div>
      <div class="close" @click="showKefu">
        <img src="../../assets/img/close.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      filelist: [],
      isShow: false,
    };
  },
  created() {
    this.userInfo = this.$store.state.userInfo;
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    toBookStatus() {
      let { token } = this.$store.state;
      if (!this.$auth(token)) {
        return;
      }
      this.$router.push("/bookstatus");
    },
    loginout() {
      this.$router.push("/login");
      this.$cache.clearCache();
      this.$store.commit("clear", {});
    },
    toSay() {
      let { token } = this.$store.state;
      if (!this.$auth(token)) {
        return;
      }
      this.$router.push("/say");
    },
    toSayList() {
      let { token } = this.$store.state;
      if (!this.$auth(token)) {
        return;
      }
      this.$router.push("/saylist");
    },
    toMessage() {
      let { token } = this.$store.state;
      if (!this.$auth(token)) {
        return;
      }
      this.$router.push("/message");
    },
    showKefu() {
      this.isShow = !this.isShow;
    },
    toModify() {
      let { token } = this.$store.state;
      if (!this.$auth(token)) {
        return;
      }
      this.$router.push("/modify");
    },
  },
};
</script>

<style scoped>
.bg {
  background-color: #f9f9f9;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.top {
  background-color: #5a78ec;
  width: 90%;
  height: 6.25rem;
  margin: 0 auto;
  margin-top: 1.25rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.625rem 1.25rem;
  position: relative;
}
.setting img {
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;
  right: 3%;
  top: 8%;
}
.information {
  margin-left: 1.25rem;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 540；;
}
.information .name {
  font-size: 1rem;
}
.information .phone {
  margin: 0.25rem 0;
}
.image {
  width: 3.75rem;
  height: 3.75rem;
  position: relative;
}

.image img {
  width: 100%;
  height: 100%;
}
.image .add {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: -0.5rem;
  height: 1rem;
  width: 1rem;
}
.login {
  margin-left: 0.9375rem;
}
.login button {
  border: none;
  background-color: #4258b3;
  color: #ffffff;
  width: 6.25rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  font-size: 0.875rem;
}
.middle {
  display: flex;
  justify-content: space-around;
  margin-top: 2.1875rem;
}
.item {
  text-align: center;
}
.item_image {
  text-align: center;
}
.item_image img {
  height: 1.875rem;
  width: 1.875rem;
}
.item .title {
  margin-top: 0.4375rem;
  color: #494846;
  font-size: 0.875rem;
  font-weight: 540;
}
.item_bottom {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1875rem 1.125rem;
}
.item_bottom .bottom_image img {
  width: 1.5625rem;
  height: 1.5625rem;
}
.left {
  display: flex;
  align-items: center;
}
.left .label {
  margin-left: 0.4rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: #494846;
}
.bottom {
  margin-top: 3.125rem;
}
.marginTop {
  margin-top: 1.875rem;
}
.btn {
  display: flex;
  justify-content: center;
  margin-top: 6.25rem;
}
.btn button {
  border: none;
  width: 6.25rem;
  background-color: #a29e9e;
  color: #ffffff;
  font-size: 0.75rem;
  height: 2.5rem;
  border-radius: 0.9375rem;
}
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  width: 95%;
  text-align: center;
  z-index: 1;
  padding: 1.25rem 0;
  box-shadow: 0.15625rem 0.3125rem 0.15625rem #8c8c8c;
  border-radius: 0.3125rem;
}
.text2 {
  color: #5f83ed;
  font-weight: 600;
}
.text3 {
  margin-top: 0.46875rem;
  font-size: 0.8125rem;
}
.phone {
  background-color: #5a78ec;
  width: 6.25rem;
  margin: 0 auto;
  margin-top: 1.25rem;
  border-radius: 0.9375rem;
}
.phone img {
  width: 0.9375rem;
  height: 0.9375rem;
  vertical-align: center;
}
.close {
  position: absolute;
  right: 5%;
  top: 5%;
}
.close img {
  width: 1.5625rem;
  height: 1.5625rem;
}
</style>